import React, {Component} from "react";



/****************************************** React.useState 函数  ****************************************************************/

// class Demo extends Component {
//
//     state={
//         count : 0
//     }
//     plus = ()=>{
//         this.setState((state)=>{
//             return {count : state.count+1}
//         });
//     }
//     render() {
//         return (
//             <>
//              <h2>当前数字为{this.state.count}</h2>
//                 <button onClick={this.plus}>加一</button >
//             </>
//         )
//     }
// }



// function Demo() {
//     //定义添加方法
//     const plus = () => {
//         /**
//          * 两种更新方法
//          * 第二种函数式可以接收当前state的值
//          */
//         // setCount(count + 1);
//         setCount((count)=>{
//             return count+1;
//         });
//     }
//     //定义状态对象
//     const [count, setCount] = React.useState(0)
//     return (
//         <>
//             <h2>当前数字为{count}</h2>
//             <button onClick={plus}>加一</button>
//         </>
//     )
// }


/****************************************** React.useEffect 函数  ****************************************************************/

// class Demo extends Component {
//
//     state = {
//         count: 0
//     }
//
//     //生命周期函数，初始化时执行一次
//     componentDidMount() {
//         console.log('---------------执行一次----------------------------')
//         // 开始定时器，每隔1秒中调用一次 plus 函数。
//         const intervalID = setInterval(this.plus, 2000);
//     }
//     //自定义函数 作用：当前数字加一。
//     plus = () => {
//         this.setState((state) => {
//             console.log('接收到的函数',state)
//             return {
//                 count: state.count + 1
//             }
//         },()=>{
//             console.log('修改后的函数',this.state)
//         })
//     }
//
//     render() {
//         return (
//             <>
//                 <h2>当前数字为{this.state.count}</h2>
//             </>
//         )
//     }
// }



//  function Demo() {
//     const [count, setCount] = React.useState(0)
//     /**
//      *     React.useEffect(执行函数,[监控属性])
//      *     监控属性 省略时,当render函数执行一次 执行函数执行一次，
//      *     监控属性 为空数组时，该函数组件初始化时执行一次。
//      *     监控属性 [id] 有监控属性时，所监控的属性变化时执行。
//      */
//     React.useEffect(
//         () => {
//             setInterval(plus, 2000)
//         }, []
//     )
//     const plus = () => {
//         setCount((count)=>{
//             return count+1
//         });
//     }
//     return (
//         <>
//             <h2>当前数字为{count}</h2>
//         </>
//     )
// }




/****************************************** React.createContext() 函数  ****************************************************************/
/*应用开发中一般不用  React.createContext（） 一般用它封装 react插件*/

//创建一个 createContext实例
const  MyContext =React.createContext()
//通过结构赋值获取 Provider 属性
const  {Provider,Consumer}=MyContext
class Demo extends Component {

    state ={
        name:'张三'
    }
    render() {
        return (
            <div style={{backgroundColor : 'red',padding : '5px',width :300,height : 400}}>
                <h2>demo组件</h2>
                {/* 用 Provider 将组件包裹，被包裹的组件及其后代组件都可以接收到  Provider value属性传递的值 */}
                <Provider value={this.state.name}>
                    <A/>
                </Provider>
            </div>
        )
    }
}
class A extends Component {
    render() {
        return (
            <div style={{backgroundColor : 'yellow',padding : '5px',width :250,height : 300}}>
                <h2>A 组件</h2>
                <B/>
                <One/>
            </div>
        )
    }
}
/*******接收方式一****************************/
class B extends Component {
    //接收 Provider传递的参数，接收前必须声明。
    static contextType=MyContext
    render() {
        // 注意取数据是从本组件的上下文属性中获取。而不是申明的对象中获取。
        console.log(this.context)
        return (
            <div style={{backgroundColor : 'green',padding : '5px',width :200,height : 100}}>
                <h2>B组件,接收数据：{this.context}</h2>
            </div>
        )
    }
}


/*******接收方二****************************/
function One() {
    return(
        <div style={{backgroundColor : 'blue',padding : '5px',width :200,height : 100}}>
            <Consumer>
                {
                    // value传递过来的参数
                    value => {
                        return(
                            <h2>
                                B2组件,接收数据：{value}
                            </h2>
                        )
                    }
                }
            </Consumer>

        </div>
    )
}

export default Demo
